view,
text {
  box-sizing: border-box;
}

page {
  background-color: #ffffff;
}

.page-box {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;

  .cbox {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;

    .cbox-bg {
      position: absolute;
      z-index: 0;
      background: linear-gradient(360deg, rgba(145, 234, 194, 0) 0%, #6CC896 100%);
      height: 728rpx;
      top: 0;
      width: 100%;
    }

    .cbox-scroll {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;

      .scroll-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-bottom: 40rpx;

        .cbox-banner {
          top: -30rpx;
          position: absolute;
          width: 100%;
          height: 294rpx;
          z-index: 0;
        }

        .body {
          padding: 0 30rpx;
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          width: 100%;
          top: 220rpx;

          .block1 {
            width: 100%;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 12rpx 6rpx rgba(0, 0, 0, 0.09);
            border-radius: 18rpx;
            display: flex;
            flex-direction: row;
            padding: 16rpx;

            .wxbox {
              position: relative;
              flex: 1;
              width: 100%;
              margin-right: 8rpx;
              background: #E9FAF2;
              border-radius: 12rpx;
              padding: 16rpx 24rpx;

              .icon1 {
                position: absolute;
                width: 98rpx;
                height: 96rpx;
                bottom: 20rpx;
                z-index: 0;
                right: 14rpx;
              }

              .txt1 {
                position: relative;
                z-index: 1;
                font-size: 28rpx;
                color: #56C395;
                font-weight: bold;
              }

              .txt2 {
                position: relative;
                z-index: 1;
                margin-top: 12rpx;
                font-size: 22rpx;
                color: #363938;
                font-weight: bold;
              }

              .btn1 {
                position: relative;
                z-index: 1;
                width: 138rpx;
                height: 44rpx;
                background: #79CEA1;
                border-radius: 30rpx;
                font-size: 22rpx;
                color: #FFFFFF;
                line-height: 44rpx;
                text-align: center;
                margin-top: 16rpx;
                margin-bottom: 70rpx;
              }

            }

            .wxbox:active {
              background: #e6f3eb;
            }

            .rbox {
              position: relative;
              flex: 1;
              width: 100%;
              margin-left: 8rpx;
              display: flex;
              flex-direction: column;

              .rbox1 {
                position: relative;
                flex: 1;
                width: 100%;
                height: 100%;
                background: #FDF9EA;
                border-radius: 12rpx;
                margin-bottom: 8rpx;
                display: flex;
                flex-direction: column;
                padding: 10rpx 0;
                padding-left: 20rpx;

                .txt1 {
                  position: relative;
                  z-index: 1;
                  font-size: 28rpx;
                  color: #FE9628;
                  font-weight: bold;
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                }

                .icon1 {
                  position: absolute;
                  width: 68rpx;
                  height: 90rpx;
                  bottom: 0rpx;
                  z-index: 0;
                  right: 0rpx;
                }

                .txt2 {
                  position: relative;
                  z-index: 1;
                  font-size: 22rpx;
                  color: #363938;
                  font-weight: bold;
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                }

              }

              .rbox1:active {
                background: #f7f1dd;
              }

              .rbox2 {
                position: relative;
                flex: 1;
                width: 100%;
                height: 100%;
                background: #F0F8FF;
                border-radius: 12rpx;
                margin-top: 8rpx;
                display: flex;
                flex-direction: column;
                padding: 10rpx 0;
                padding-left: 20rpx;

                .icon1 {
                  position: absolute;
                  width: 72rpx;
                  height: 94rpx;
                  bottom: 0rpx;
                  z-index: 0;
                  right: 0rpx;
                }

                .txt1 {
                  position: relative;
                  z-index: 1;
                  font-size: 28rpx;
                  color: #007BF0;
                  font-weight: bold;
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                }

                .txt2 {
                  position: relative;
                  z-index: 1;
                  font-size: 22rpx;
                  color: #363938;
                  font-weight: bold;
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                }

              }

              .rbox2:active {
                background: #e9f1f8;
              }

            }

          }

          .block2 {
            position: relative;
            margin-top: 30rpx;
            width: 100%;
            background: #FFFFFF;
            border-radius: 18rpx;
            display: flex;
            flex-direction: row;
            padding: 28rpx 34rpx;
            display: flex;
            flex-direction: column;

            .icon1 {
              position: absolute;
              width: 114rpx;
              height: 122rpx;
              bottom: 0;
              right: 0;
              z-index: 0;
            }

            .txt1 {
              z-index: 1;
              position: relative;
              font-size: 28rpx;
              font-weight: bold;
              color: #333333;
            }

            .txt2 {
              margin-top: 10rpx;
              z-index: 1;
              position: relative;
              font-size: 24rpx;
              color: #A19797;

              .redtxt {
                font-weight: bold;
                color: #EE6161;
              }
            }

          }

          .block2:active { 
            background-color: #f4fffb;
          }

          .block2:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            box-sizing: border-box;
            border-radius: 36rpx;
            border: 2rpx solid #d8d8d8;
            -webkit-transform: scale(.5);
            transform: scale(.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
          }

          .block3 {
            margin: 30rpx -30rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .menu-swiper {
              width: 100%;
              height: 146rpx;

              .menu-swiper-item {
                width: 100%;
                height: 100%;

                .menu-item {
                  padding: 0 30rpx;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: flex-start;

                  .menu-box {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    border-radius: 10rpx;

                    .menu-icon {
                      width: 72rpx;
                      height: 72rpx;
                      flex-shrink: 0;
                    }

                    .menu-name {
                      font-size: 22rpx;
                      font-weight: bold;
                      color: #333333;
                      margin-top: 20rpx;
                      margin-bottom: 20rpx;
                      word-break: break-all;
                    }

                  }

                  .menu-box:active {
                    opacity: 0.6;
                  }

                }

              }

            }

            .scrollbar {
              margin-top: 20rpx;
              position: relative;
              background-color: #e7e7e7;
              height: 8rpx;
              border-radius: 10rpx;
              width: 32rpx;
              overflow: hidden;

              .scroll-icon {
                position: absolute;
                top: 0;
                left: 0;
                height: 8rpx;
                width: 32rpx;
                border-radius: 10rpx;
                background-color: #64BF8F;
                transition: all 0.2s;
              }

            }

          }

          .block4 {
            margin-top: 30rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            .mgr10 {
              margin-right: 10rpx;
            }

            .mgl10 {
              margin-left: 10rpx;
            }

            .scan-btn {
              flex: 1;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              height: 110rpx;
              border-radius: 16rpx;

              .icon1 {
                width: 48rpx;
                height: 48rpx;
              }

              .txt1 {
                margin-left: 24rpx;
                font-size: 36rpx;
                color: #FFFFFF;
              }
            }

            .green {
              background: #79CEA1;
            }

            .green:active {
              background: #71c598;
            }

            .blue {
              background: #5FA8FC;
            }

            .blue:active {
              background: #5ba0f0;
            }

          }

          .block5 {
            margin: 20rpx 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20rpx;

            .copyright {
              font-size: 24rpx;
              color: #999999;
              line-height: 34rpx;
              word-break: break-all;
            }
          }

        }

      }

    }

  }

  .safe-bottom {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tabbar {
    flex-shrink: 0;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);

    .tabs {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx;

        .tab-icon {
          width: 44rpx;
          height: 44rpx;
        }

        .tab-name {
          margin-top: 8rpx;
          color: #BFBFBF;
          line-height: 32rpx;
          font-size: 24rpx;
        }

        .tab-active {
          color: #57D08F;
        }

      }

    }

  }

}